<template>

    <div class="cont">
        <scroller
            :on-refresh="refresh"
            :on-infinite="infinite"
            ref="infinite"
            class="cont"
        >

            <div class="title">
                <div>
                    头像昵称
                </div>
                <div>
                    会员等级
                </div>
                <div>
                    邀请时间
                </div>
            </div>
            <div
                class="list"
                v-for="(item, index) in listSource"
                :key="index"
            >
                <div>
                    <img :src="item.head_img">
                    <span>{{item.nickname}}</span>
                </div>
                <div>
                    {{item.group_name}}
                </div>
                <div>
                    {{time(item.create_time,"yyyy.MM.dd hh:mm")}}
                </div>
            </div>
        </scroller>
    </div>
</template>
<script>

import { formatDate } from "../../lib/time.js";
import wxPay from '../../config/wxPay.js';
export default {
    name: "allOrder",
    data() {
        return {
            page: 1,
            limit: 10,
            noData: true,
            listSource: [],
        };
    },
    methods: {
        time(time, type) {
            let date = new Date(time);
            return formatDate(date, type);
        },
        infinite() {
            this.listData();
        },
        refresh() {
            this.page = 1;
            this.listData(true);
        },
        listData(type) {
            let params = {
                is_vip: 'yes'
            };
            this.$post("/member/get_recommender_list", params)
                .then(res => {
                    if (res.code === 20000) {
                        this.page++;
                        if (type) {
                            this.listSource = res.data.list;
                            setTimeout(() => {
                                this.$refs.infinite.finishPullToRefresh();
                            }, 500);
                        } else {
                            for (let i in res.data.list) {
                                let newData = res.data.list[i];
                                this.listSource.push(newData);
                            }
                            console.log(res.data.list.length < this.limit);
                            if (res.data.list.length < this.limit) {
                                this.noData = false;
                                this.$refs.infinite.finishInfinite(true);
                            } else {
                                this.$refs.infinite.finishInfinite();
                            }
                        }
                    }
                })
                .catch(err => { });
            // 方法
        },

    },
    beforeCreate() {
        document.querySelector("body").setAttribute("style", "background-color:#f0effe");
    },
    created() {
        // 实例创建完成
        // this.infoData();
    },
};
</script>
<style lang="less" scoped>
.cont {
    padding-top: 50px;
}
.title {
    border-top: 10px solid #e1deff;
    border-bottom: 1px solid #c8c3ff;
    padding: 0 12px;
    height: 55px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    div {
        width: 33.333333%;
        text-align: center;
        font-size: 15px;
        color: #666666;
    }
}
.list {
    margin-top: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 12px;
    > div {
        width: 33.333333%;
    }
    > div:nth-of-type(1) {
        display: flex;
        align-items: center;
        justify-content: center;
        img {
            width: 32px;
            height: 32px;
            border-radius: 16px;
        }
        > span {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            padding-left: 10px;
            font-size: 15px;
            color: #333333;
        }
    }
    > div:nth-of-type(2) {
        text-align: center;
        font-size: 14px;
        color: #666666;
    }
}
</style>